<script setup>

import {Plus} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
const formInline = reactive({
  name: '',
  pageNum:1,
  pageSize:3
})
const total=ref(0);
const isAdd = ref(true); // 标记是添加还是修改
const saveOrUpdateVisible = ref(false);
const saveOrUpdateTitle = ref('添加');
const articletype=ref(
    {
      name:'',
    }
)

// 修改onEdit函数
const onEdit = row => {
  saveOrUpdateTitle.value = '编辑';
  saveOrUpdateVisible.value = true;
  articletype.value = {...row};
  console.log('articletype', articletype.value)
  isAdd.value = false;
};

//去添加的页面
const onAdd = ()=>{
  saveOrUpdateTitle.value='添加'
  saveOrUpdateVisible.value=true
  articletype.value= {
    name:'',
  }
  isAdd.value = true; // 设置为添加模式
}

// 取消
const closearticle = ()=>{
  saveOrUpdateVisible.value=false
}

// 保存
//添加和修改
const savearticle = ()=>{
  if (saveOrUpdateTitle.value==='添加'){
    axios.post('addarticletype',articletype.value)
        .then(res => {
          console.log('res', res);
          console.log('articletype',articletype.value)
          getArticleType();
          ElMessage({
            message: '添加成功！',
            type: 'success',
          })
        })
        .catch(err => {
          console.log('err', err)
        })
  }else if (saveOrUpdateTitle.value==='编辑'){
    axios.put('updatearticletype', articletype.value)
        .then(res => {
          console.log('res', res);
          getArticleType();
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
        })
        .catch(err => {
          console.log(err)
        })
  }
  saveOrUpdateVisible.value=false
}

// 删除
const onDel = row=>{
  console.log('row',row.articles.length)
  console.log(row.articles);
  ElMessageBox.confirm(
      '真的要删除吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        //检查
        if (row.articles.length>0)
          ElMessage({
            message: '该分类下有文章，不能删除！',
            type: 'warning',
          })
        else {
          axios.delete('deletearticletype',
              {
                params: {
                  id: row.id
                }
              })
              .then(res => {
                console.log('res', res);
                getArticleType();
                ElMessage({
                  message: '删除成功！',
                  type: 'success',
                })
              })
              .catch(err => {
                console.log('err', err);
                ElMessage({
                  message: '删除失败！',
                  type: 'error',
                })
              })
        }
          }
      )
}

const onSubmit = () => {
  getArticleType();
}

const tableData = ref()

// 分页
// 每页条数改变
const handleSizeChange = (val) => {
  formInline.pageSize=val
  formInline.pageNum=1
  getArticleType();
}
const handleCurrentChange = (val) => {
  formInline.pageNum=val
  getArticleType();
}

onMounted(()=>{
  console.log('页面加载了');
  getArticleType();
})
// 定义一个方法,用来动态调用后端接口,获取文章列表
const getArticleType=()=>{
  axios.get('articletypeByname',
      {params:formInline
      })
      .then(res=>{
        console.log('res',res);
        total.value=res.data.data.total;
        tableData.value = res.data.data.list;
      })
      .catch(err=>{
        console.log('err',err);
      })
}

const getArticleTypeById=(id)=>{
  axios.get('selectarticletypebyId',
      {params:{id:id}})
      .then(res=>{
        console.log('res',res);
      })
      .catch(err=>{
        console.log('err',err);
      })
}


</script>

<template>
  <div class="about">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="输入文章关键字">
        <el-input v-model="formInline.name" placeholder="请输入" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>



    <div class="mb20">
      <el-button @click="onAdd" type="primary" icon="Plus" plain>新增</el-button>
      <el-button type="danger" icon="Delete" plain>删除</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="id" label="编号" width="150" />
      <el-table-column prop="name" label="分类名称" width="120" />

      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="onEdit(scope.row)">修改</el-button>
          <el-button link type="primary" @click="onDel(scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top: 10px"
                   v-model:current-page="formInline.pageNum"
                   v-model:page-size="formInline.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :page-sizes="[1, 3, 5, 10]"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />
  </div>

  <!-- 添加，编辑弹框 -->
  <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
    <el-form :model="articletype">
      <el-form-item label="FM名称" :label-width="formLabelWidth">
        <el-input v-model="articletype.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closearticle">取消</el-button>
        <el-button type="primary" @click="savearticle">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>